<script setup lang="ts">
import { ref } from "vue";
import pickerConfirm from "./public/imgs/picker_confirm.png";
const { t } = useI18n();
const props = defineProps<{
  show: boolean;
  // title?: string
  // columns: Array<{ value: number; text: string }>
}>();

const emit = defineEmits<{
  (e: "update:show", value: boolean): void;
  // (e: 'confirm', selectedValues: number[]): void
}>();

const pickerValue = ref<number[]>([]);

const handleConfirm = ({ selectedValues }: { selectedValues: number[] }) => {
  emit("update:show", false);
  // emit('confirm', selectedValues)
};
// v-model:show 实际上是 :show 和 @update:show 的语法糖
// 直接绑定到 prop 会导致试图修改 prop，这在 Vue 中是被禁止的
const showModel = computed({
  get: () => props.show,
  set: (val) => emit("update:show", val),
});
const tabArr = [
  {
    id: 0,
    name: "1-ST",
  },
  {
    id: 1,
    name: "2-ST",
  },
  {
    id: 2,
    name: "3-ST",
  },
];
const menuAactive = ref(0);
</script>

<template>
  <van-popup
    v-model:show="showModel"
    destroy-on-close
    round
    position="bottom"
    :style="{ background: '#222628', height: '95%' }"
  >
    <div class="topic relative">
      <div class="color-#ffffff text-18 font-bold text-center my-15">
        Welcome Bonus Details
      </div>
      <img   @click="emit('update:show', false)" 
        :src="pickerConfirm"
        alt=""
        class="absolute right-15 top-5 w-18 h-10"
      />
    </div>
    <!-- tab标签 -->
    <van-tabs v-model:active="menuAactive" swipeable sticky class="px-15">
      <van-tab v-for="(item, index) in tabArr" :key="item.name">
        <template #title>
          <div class="flex items-center">
            <span :class="menuAactive == index ? 'color-#eef3ff' : 'inactive'">
              {{ item.name }}</span
            >
          </div>
        </template>
      </van-tab>
    </van-tabs>
    <div class="center-img">
      <div>Deposit Boost</div>
      <div>Gundam <span class="text-20">20.00%</span></div>
    </div>
    <!--  -->
    <div class="mx-15 mt-10">
      <div class="item-num">
        <div class="title">From Deposit <span class="gold"> RS20</span></div>
        <div class="box">1.4.00% <span class="ml-10">to up to</span></div>
      </div>
      <div class="item-num">
        <div class="title">From Deposit <span class="gold"> RS20</span></div>
        <div class="box">1.4.00% <span class="ml-10">to up to</span></div>
      </div>
      <div class="item-num">
        <div class="title">From Deposit <span class="gold"> RS20</span></div>
        <div class="box">1.4.00% <span class="ml-10">to up to</span></div>
      </div>
    </div>
    <!-- Detailed Rules -->
    <div class="mx-15 mt-10">
      <div class="color-#ffffff">Detailed Rules</div>
      <table>
        <thead class="text-10">
          <tr class="first">
            <th class="w-30%">Deposit</th>
            <th class="w-30%">Award</th>
            <th class="w-30%">Limit</th>
          </tr>
        </thead>
        <tbody class="text-12">
          <tr class="other">
            <td>RS20</td>
            <td>5%</td>
            <td>RS1000</td>
          </tr>
        </tbody>
      </table>
    </div>
    <!-- 按钮 -->
    <div class="btn-box">Deposit</div>
  </van-popup>
</template>
<style lang="css" scoped>
.btn-box {
  /* width: 100%; */
  border-radius: 6px;
  background: #1475e0;
  margin: 20px 15px 10px;
  text-align: center;
  color: #ffffff;
  padding: 10px 0;
}
.first {
  background: #3a4040;
  border-radius: 6px;
}
.other {
  background: #323838;
  border-radius: 6px;
}
td,
th {
  padding: 10px 0;
}
th {
  /* overflow: hidden;
  text-overflow: ellipsis; */
  white-space: wrap;
}
table {
  border: none;
  color: #8b9393;
  width: 100%;
  text-align: center;
  border-radius: 6px;
}
.box {
  color: #8c9494;
  width: 100%;
  margin: 10px 0;
  background: #323838;
  border-radius: 6px;
  padding: 10px;
}
.item-num {
  margin: 15px 0;
}
.title {
  color: #8c9494;
}
.gold {
  color: #ffffff;
  margin-left: 20px;
}
.center-img {
  padding: 10px 0;
  margin: 15px 15px 0;
  text-align: center;
  color: #eef3ff;
  background: url("/activity/green_bg.png") no-repeat;
  background-size: 100% 100%;
}

::v-deep .van-tabs__line {
  background: transparent;
  height: 30px;
  padding-bottom: 0;
}

::v-deep .van-tabs__nav--line {
  padding-bottom: 0;
}

.tabs .tab-item {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  background: #ffffff;
}

::v-deep .van-tab {
  color: #ffffff;
}

/* ::v-deep .van-tabs {
  padding: 8px 15px;
} */

::v-deep .van-tabs--line .van-tabs__wrap {
  background: #16161a;
  border-radius: 20px;
  padding: 0 10px;
}

.inactive {
  filter: brightness(0) saturate(100%) invert(44%) sepia(8%) saturate(697%)
    hue-rotate(185deg) brightness(91%) contrast(90%);
}

::v-deep .tabs .van-swipe-item .van-tab__panel-wrapper {
  background: #ffffff;
}

::v-deep .van-tabs__nav {
  background: transparent;
}

::v-deep .van-tab--active {
  margin-top: 7px;
  background: url("/imgs/tabs_active_bg.png") no-repeat;
  background-size: 100% 100%;
  height: 30px;
  border-radius: 30px;
  background: #323838;
}

::v-deep .van-tab--active img {
  width: 22px;
}
</style>